<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
            .header{
                height: 66px;
                border-bottom:1px solid rgb(224, 224, 233);

            }
            .banner{
                width: 1207px;
                height: 512px;
                margin:25px auto;
            }
            .menu{
                width: 1207px;
                height: 36px;
                margin:0px auto; 
                /* background: aqua; */
            }
            .list{
                width: 1207px;
                height: 1000px;
                /* background:lime; */
                margin:25px auto 12px; 
            }
            .txt{
                width: 1207px;
                height: 35px;
                /* background:lime; */
                text-align: center;
                /* 文字垂直居中设置行高等于当前标签的高度 */
                line-height: 35px;
                margin:12px auto 0px;
            }
            .header .left{
                float: left;
                margin-top: 26px;
                margin-left: 35px;
            }
            .header ul{
                float: left;
                margin-top: 15px;
                margin-left: 257px;
            }
            .header .right{
                float: right;
            }
            .header li{
                float: left;
            }
            .banner .left{
                float: left;
                width: 909px;
            }
            .banner .right{
                float: right;
                width: 289px;
            }
            .banner .right li{
                width: 289px;
                height: 163px;
                margin-bottom:12px;
              
                /* 超出部分隐藏 */
                overflow: hidden;
                position: relative;
            }
            .banner .right img{
                width: 289px;
            }
            .banner .right p{
                position: absolute;
                left:0px;
                bottom:0px;
                /* rgba实现透明色 rgb红绿蓝 a透明度0-1 */
                background:rgba(0,0,0,0.3);
                width:289px;
                height: 30px;
                line-height: 30px;
            }
            .list li img{ 
                float: left;
                width: 285px;
                margin-right: 16px;
                margin-bottom: 20px;
                height: 314px;
            }
            .dibu{
                /* background: chartreuse; */
                width: 1209px;
                height: 120px;
                margin:0px auto; 
                margin-top: 20px;
            }
            .dibu .hezuo{
                float: left;
                width: 1207px;
            }
            .dibu .shangbiao img{
                width: 140px;
                height: 60px;
                float: left;
                margin-top: 20px;
                margin-left: 20px;
            }
        .you ul{
                width: 1207px;
            /* background: red; */
            margin:0px auto; 
            margin-top: 5px;
            }
            .you ul a{
                text-decoration: none;
            }
            .DRC{
                width: 1207px;
            /* background: rgb(142, 190, 10); */
            margin:0px auto; 
            margin-top: 5px;
            text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="header">
            <!-- span引入小元素 -->
            <span class="left">三</span>
            <ul>
                <li>赞</li>
                <li>哈</li>
            </ul>
            <span class="right">登录</span>
       
       
       
        </div>
                    <div class="banner">
                        <img src="images/s003.jpg" alt="" class="left">
                        <ul class="right">
                            <li>
                                <img src="images/s02.jpg" alt="">
                                <p>想点亮圣诞气氛，试试这个驯鹿灯</p>
                            </li>
                            <li>
                                <img src="images/s03.jpg" alt="">
                                <p>Designer 100,100个设计师，100个故事</p>
                            </li>
                            <li>
                                <img src="images/s04.jpg" alt="">
                                <p>旧椅子获新生，还比以前更酷炫了</p>
                            </li>
                        </ul>
                    </div>



                            <ul class="menu"> <select name="" id="">
                                        <option value="">最新</option>
                                    </select>
                                    <select name="" id="">
                                    <option value=""selected>最热</option>
                                </select>
                                <select name="" id="">
                                    <option value=""selected>热议</option>
                                    <select name="" id="">
                                <select name="" id="">
                                    <option value="">随机</option>

                                </select>
                            </ul>



        <ul class="list">
            <li>
                <img src="images/i01.jpg" alt="">
            </li>

            <li>
                <img src="images/i02.jpg" alt="">
            </li>

            <li>
                <img src="images/i03.jpg" alt="">
            </li>

            <li>
                <img src="images/i04.jpg" alt="">
            </li>

            <li>
                <img src="images/i05.jpg" alt="">
            </li>
            
            <li>
                <img src="images/i06.png" alt="">
            </li>

            <li>
                <img src="images/i07.png" alt="">
            </li>

            <li>
                <img src="images/i08.jpg" alt="">
            </li>

            <li>
                <img src="images/i09.jpg" alt="">
            </li>

            <li>
                <img src="images/i10.jpg" alt="">
            </li>

            <li>
                <img src="images/i11.jpg" alt="">
            </li>

            
            <li>
                <img src="images/i12.jpg" alt="">
            </li>

        </ul>


        <p class="txt">太快了吧，慢慢来，笑</p>
        <div class="dibu">
            <ul>
                <li class="hezuo">
                    合作伙伴
                </li>
            </ul>
                    <div class="shangbiao">
                            <ul>
                                <li>
                                    <img src="images/x01.png" alt="">
                                </li> 
                                
                                <li>
                                    <img src="images/x02.png" alt="">
                                </li>

                                <li>
                                    <img src="images/x03.png" alt="">
                                </li>

                                <li>
                                    <img src="images/x04.png" alt="">
                                </li>

                                <li>
                                    <img src="images/x05.png" alt="">
                                </li>

                                <li>
                                    <img src="images/x06.png" alt="">
                                </li>

                                <li>
                                    <img src="images/x07.jpg" alt="">
                                </li>
                            </ul>
                               
                    </div>
        </div> 

            <div class="you">
                <ul class="you">
                    <li>
                        <a href="">友情链接</a>
                    </li>
                </ul>
             </div>
             <div class="DRC">
                <p>DRC北京工业设计创意产业基地  |  中国工业设计协会  |  设计邦  |  网易家居  |  凤凰家居  |  智东西  |  壹网空间  |  七牛云存储  |  高清图片  |  Fotor</p>
             </div>

    </body>
</html>
<!-- 草料二维码https://cli.im/url?0f67024c4bdc1885d091724f953cf6b4 -->